import * as THREE from "three";

let isOpen = true;
/**
 * 精灵创建下雨效果
 */
// 加载雨滴理贴图
const textureTree = new THREE.TextureLoader().load("/img/rain.png");

const group = new THREE.Group();
// 批量创建表示雨滴的精灵模型

function init(scene) {
  for (let i = 0; i < 400; i++) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: textureTree, //设置精灵纹理贴图
    });
    // 创建精灵模型对象
    var sprite = new THREE.Sprite(spriteMaterial);
    // 控制精灵大小,
    sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
    var k1 = Math.random() - 0.5;
    var k2 = Math.random() - 0.5;
    var k3 = Math.random() - 0.5;
    // 设置精灵模型位置，在整个空间上上随机分布
    sprite.position.set(2000 * k1, 3000 * k3, 2000 * k2);
    group.add(sprite);
  }
  if (isOpen === false) {
    isOpen = true;
    return;
  }
  scene.add(group);
  render();
}

// 渲染函数
function render() {
  // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
  // 每次渲染都会更新雨滴的位置，进而产生动画效果
  group.children.forEach((sprite) => {
    if (!isOpen) {
      group.remove(sprite);
    }
    // 雨滴的y坐标每次减1
    sprite.position.y -= 5;
    if (sprite.position.y < -100) {
      // 如果雨滴落到地面，重置y，从新下落
      sprite.position.y = 400;
    }
  });
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}

export default {
  init,
  close: () => (isOpen = false),
};
